import 'package:common_utils/common_utils.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:part_time_job_pro/common/index.dart';
import 'package:part_time_job_pro/common/widgets/rectangle_check_box.dart';
import 'package:part_time_job_pro/pages/register/logic.dart';

class RegisterPage extends StatelessWidget {
  RegisterPage({Key? key}) : super(key: key);
  //路由地址
  static const String routeName = "/register";
  final logic = Get.find<RegisterLogic>();
  final state = Get.find<RegisterLogic>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder<RegisterLogic>(builder: (logic) {
      return Scaffold(
          appBar: AppBar(
            backgroundColor: AppColor.norWhite01Color,
            leading: InkWell(
                onTap: () {
                  Get.back();
                },
                child: Container(
                  padding: EdgeInsets.all(10.r),
                  child: Image.asset(AssetsImages.appBarBack),
                )),
            elevation: 0,
            title: const Text(
              "企业注册",
              style: AppTheme.appBarStyle,
            ),
          ),
          body: SingleChildScrollView(
              child: Container(
            height: 1.sh,
            color: AppColor.norWhite01Color,
            padding: EdgeInsets.symmetric(vertical: 10.r, horizontal: 20.r),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                buildTitle(),
                buildCompanyName(),
                buildContactPerson(),
                buildCountrySelect(context),
                buildContactMobile(),
                buildRegisterPassowrd(),
                buildMobileVerifyCode(context),
                buildRegisterAgreement(),
                buildRegisterButton()
              ],
            ),
          )));
    });
  }

  //处理标题
  Widget buildTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      padding: EdgeInsets.only(top: 5.r, bottom: 10.r),
      child: Text(
        "招人，我就要快人一步",
        style: TextStyle(
            fontSize: 24.r,
            fontWeight: FontWeight.w600,
            color: AppColor.norMainThemeColors),
      ),
    );
  }

  //企业名称
  Widget buildCompanyName() {
    return Container(
        padding: EdgeInsets.only(top: 10.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("企业名称",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.companyFocusNode,
                    keyboardType: TextInputType.text,
                    keyboardAppearance: Brightness.light,
                    autofocus: true,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateCompanyName(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.companyTextEditController,
                    decoration: InputDecoration(
                        hintText: "请输入企业名称/机构名称",
                        border: InputBorder.none,
                        suffixIcon: state.companyName.isNotEmpty &&
                                logic.companyFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearCompanyName();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                ))
              ]),
            )
          ],
        ));
  }

  //联系人
  Widget buildContactPerson() {
    return Container(
        padding: EdgeInsets.only(top: 5.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("联系人",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.contactFocusNode,
                    autofocus: true,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateContactName(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.contactTextEditController,
                    decoration: InputDecoration(
                        hintText: "请输入联系人称呼",
                        border: InputBorder.none,
                        suffixIcon: state.contactName.isNotEmpty &&
                                logic.contactFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearContactName();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                ))
              ]),
            )
          ],
        ));
  }

  //地区选择
  Widget buildCountrySelect(BuildContext context) {
    return Container(
        padding: EdgeInsets.only(top: 10.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("所属地区",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: InkWell(
                        onTap: () {
                          logic.showCitySelector(context);
                        },
                        child: Container(
                          padding: EdgeInsets.symmetric(vertical: 10.r),
                          margin: EdgeInsets.only(left: 15.r),
                          child: Text(
                            state.countryText == "" ? "请选择" : state.countryText,
                            style: TextStyle(
                                fontSize: 14.sp,
                                color: state.countryText == ""
                                    ? AppColor.norGrayColor
                                    : AppColor.norBlackColors),
                          ),
                        )))
              ]),
            )
          ],
        ));
  }

  //联系电话
  Widget buildContactMobile() {
    return Container(
        padding: EdgeInsets.only(top: 5.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 60.r,
                  child: Text("联系电话",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.mobileFocusNode,
                    autofocus: true,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateTel(text);
                    },
                    keyboardType: TextInputType.phone,
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.mobileTextEditController,
                    decoration: InputDecoration(
                        hintText: "请输入联系人电话",
                        border: InputBorder.none,
                        suffixIcon: state.mobileText.isNotEmpty &&
                                logic.mobileFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearTel();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                ))
              ]),
            )
          ],
        ));
  }

  //手机验证码
  Widget buildMobileVerifyCode(BuildContext context) {
    return Container(
        padding: EdgeInsets.only(top: 5.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 45.r,
                  child: Text("验证码",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.verifyCodeFocusNode,
                    autofocus: true,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updateVerifyText(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.verifyCodeTextFieldController,
                    decoration: InputDecoration(
                        hintText: "请输入短信验证码",
                        border: InputBorder.none,
                        suffixIcon: state.verifyText.isNotEmpty &&
                                logic.verifyCodeFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearVerifyCode();
                                },
                                icon: const Icon(Icons.cancel))
                            : const SizedBox(
                                width: 0,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                )),
                GestureDetector(
                    onTap: () {
                      if (state.codeSeconds == 0) {
                        LogUtil.e("发送验证码");
                        FocusScope.of(context).unfocus();
                        logic.getSmsCode();
                      } else {
                        LogUtil.e("请勿频繁操作!");
                      }
                    },
                    child: Container(
                      alignment: Alignment.centerRight,
                      width: 80.r,
                      child: Text(
                          state.codeSeconds > 0
                              ? "${state.codeSeconds}s"
                              : "获取验证码",
                          style: TextStyle(
                            color: AppColor.norYellow03Colors,
                            fontSize: 14.sp,
                          )),
                    )),
              ]),
            )
          ],
        ));
  }

  //注册密码
  Widget buildRegisterPassowrd() {
    return Container(
        padding: EdgeInsets.only(top: 5.r),
        color: AppColor.norWhite01Color,
        width: 1.sw,
        child: Column(
          children: [
            Container(
              //padding: EdgeInsets.symmetric(vertical: 2.r, horizontal: 15.r),
              decoration: BoxDecoration(
                color: AppColor.norWhite01Color,
                border: Border(
                  bottom:
                      BorderSide(width: 1.r, color: AppColor.norWhite06Color),
                ),
              ),
              child: Row(children: [
                Container(
                  alignment: Alignment.centerLeft,
                  width: 40.r,
                  child: Text("密码",
                      style: TextStyle(
                        color: AppColor.norGray03Color,
                        fontSize: 14.sp,
                      )),
                ),
                Expanded(
                    child: Container(
                  margin: EdgeInsets.only(left: 15.r),
                  child: TextField(
                    focusNode: logic.passwordFocusNode,
                    autofocus: true,
                    obscureText: state.isObscure,
                    showCursor: true,
                    cursorHeight: 18.sp,
                    onChanged: (text) {
                      logic.updatePassword(text);
                    },
                    cursorColor: AppColor.norYellow04Colors,
                    controller: logic.passwordTextFieldController,
                    decoration: InputDecoration(
                        hintText: "6-20位数字或字母",
                        border: InputBorder.none,
                        suffixIcon: state.passwordText.isNotEmpty &&
                                logic.passwordFocusNode.hasFocus
                            ? IconButton(
                                color: AppColor.norGrayColor,
                                onPressed: () {
                                  logic.clearPassword();
                                },
                                icon: const Icon(Icons.cancel))
                            : SizedBox(
                                width: 0.r,
                              ),
                        hintStyle: TextStyle(
                          color: AppColor.norGrayColor,
                          fontSize: 14.sp,
                        )),
                    style: TextStyle(
                        fontSize: 14.sp, color: AppColor.norBlackColors),
                  ),
                )),
                Container(
                  alignment: Alignment.centerLeft,
                  child: IconButton(
                      color: AppColor.norMainThemeColors,
                      onPressed: () {
                        logic.updateIsObscure();
                      },
                      icon: Icon(state.isObscure
                          ? Icons.visibility
                          : Icons.visibility_off)),
                ),
              ]),
            )
          ],
        ));
  }

  //注册按钮
  Widget buildRegisterButton() {
    return GestureDetector(
        onTap: () {
          logic.registerAccount();
        },
        child: Container(
          width: 1.sw,
          alignment: Alignment.center,
          margin: EdgeInsets.only(top: 15.r, bottom: 0),
          padding: EdgeInsets.symmetric(vertical: 10.r),
          decoration: BoxDecoration(
              color: AppColor.norYellow04Colors,
              borderRadius: BorderRadius.circular(6)),
          child: Text("提交",
              style:
                  TextStyle(color: AppColor.norWhite01Color, fontSize: 20.sp)),
        ));
  }

  //同意协议
  Widget buildRegisterAgreement() {
    return Container(
      color: AppColor.norWhite01Color,
      width: 1.sw,
      padding: EdgeInsets.symmetric(vertical: 10.r),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          GestureDetector(
            //checkbox
            onTap: () {
              logic.changeIsAgree();
            },
            child: Text.rich(
              //实现换行
              TextSpan(
                children: [
                  WidgetSpan(
                    child: RectangleCheckBox(
                      size: 14.sp,
                      animationDuration: const Duration(milliseconds: 300),
                      checkedColor: AppColor.norYellow02Colors,
                      borderColor: state.isAgreement
                          ? AppColor.norYellow02Colors
                          : AppColor.norGrayColor,
                      isChecked: state.isAgreement,
                      onTap: (value) {
                        logic.changeIsAgree();
                      },
                    ),
                  ),
                  TextSpan(
                    text: "   ",
                    style: TextStyle(fontSize: 12.sp),
                  ),
                  TextSpan(
                    text: "我已经阅读同意",
                    style: TextStyle(
                        color: AppColor.norGrayColor, fontSize: 12.sp),
                  ),
                  TextSpan(
                    text: "《",
                    style: TextStyle(
                        color: AppColor.norGrayColor, fontSize: 12.sp),
                  ),
                  TextSpan(
                    text: "用户协议",
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        print("11111");
                      },
                    style: TextStyle(
                        color: AppColor.norYellow04Colors, fontSize: 12.sp),
                  ),
                  TextSpan(
                    text: "》和《",
                    style: TextStyle(
                        color: AppColor.norGrayColor, fontSize: 12.sp),
                  ),
                  TextSpan(
                    text: "隐私协议",
                    recognizer: TapGestureRecognizer()
                      ..onTap = () {
                        print("22222");
                      },
                    style: TextStyle(
                        color: AppColor.norYellow04Colors, fontSize: 12.sp),
                  ),
                  TextSpan(
                    text: "》",
                    style: TextStyle(
                        color: AppColor.norGrayColor, fontSize: 12.sp),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
